<template>
  <div class="feedback">
    <h2 class="title">意见反馈</h2>
    <div class="content">
      <p class="description">
        我们非常重视您的反馈，这将帮助我们不断改进产品和服务质量。
      </p>
      <a-form
        :model="formState"
        name="feedback"
        @finish="onFinish"
        class="feedback-form"
      >
        <a-form-item
          name="type"
          label="反馈类型"
          :rules="[{ required: true, message: '请选择反馈类型' }]"
        >
          <a-select v-model:value="formState.type" placeholder="请选择反馈类型">
            <a-select-option value="suggestion">功能建议</a-select-option>
            <a-select-option value="bug">问题反馈</a-select-option>
            <a-select-option value="complaint">投诉</a-select-option>
            <a-select-option value="other">其他</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item
          name="content"
          label="反馈内容"
          :rules="[{ required: true, message: '请输入反馈内容' }]"
        >
          <a-textarea
            v-model:value="formState.content"
            :rows="4"
            placeholder="请详细描述您的问题或建议"
          />
        </a-form-item>

        <a-form-item
          name="contact"
          label="联系方式"
          :rules="[{ required: true, message: '请输入您的联系方式' }]"
        >
          <a-input
            v-model:value="formState.contact"
            placeholder="请留下您的邮箱或手机号，方便我们回复"
          />
        </a-form-item>

        <a-form-item>
          <a-button type="primary" html-type="submit" :loading="submitting">
            提交反馈
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { message } from "ant-design-vue";

interface FormState {
  type: string;
  content: string;
  contact: string;
}

const formState = reactive<FormState>({
  type: "",
  content: "",
  contact: "",
});

const submitting = ref(false);

const onFinish = async (values: FormState) => {
  try {
    submitting.value = true;
    // 这里添加提交反馈的接口调用
    console.log("提交的表单数据:", values);
    message.success("感谢您的反馈！");
  } catch (error) {
    message.error("提交失败，请稍后重试");
  } finally {
    submitting.value = false;
  }
};
</script>

<style scoped>
.feedback {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 24px;
  color: #333;
}

.description {
  font-size: 16px;
  color: #666;
  margin-bottom: 32px;
}

.feedback-form {
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .title {
    font-size: 20px;
    margin-bottom: 16px;
  }

  .description {
    font-size: 14px;
    margin-bottom: 24px;
  }

  .feedback-form {
    padding: 16px;
  }
}

/* 大屏幕优化 */
@media screen and (min-width: 1920px) {
  .feedback {
    max-width: 1000px;
  }

  .title {
    font-size: 28px;
  }

  .description {
    font-size: 18px;
  }

  .feedback-form {
    padding: 32px;
  }
}

:deep(.ant-form-item-label > label) {
  font-weight: 500;
}
</style>
